<template>
  <transition name="el-zoom-in-center">
    <div
      aria-hidden="true"
      class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu user-select-none"
      role="tooltip"
      data-popper-placement="bottom"
      :style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
      :key="Math.random()"
      v-show="state.isShow"
    >
      <ul class="el-dropdown-menu">
        <li
          v-for="(v, k) in dropdownList"
          class="el-dropdown-menu__item"
          :class="{'disabled':v.disabled}"
          aria-disabled="false"
          tabindex="-1"
          :key="k"
          @click="onContextMenuClick(v)"
        >
          <!--            <SvgIcon :name="v.icon" />-->
          <el-icon v-if="v.contextMenuClickId === 0">
            <Download/>
          </el-icon>
          <el-icon v-else-if="v.contextMenuClickId === 1">
            <MessageBox/>
          </el-icon>
          <el-icon v-else-if="v.contextMenuClickId === 2">
            <FolderAdd/>
          </el-icon>
          <el-icon v-else-if="v.contextMenuClickId === 3">
            <Refresh/>
          </el-icon>
          <el-icon v-else-if="v.contextMenuClickId === 4">
            <EditPen/>
          </el-icon>
          <el-icon v-else-if="v.contextMenuClickId === 5">
            <Delete/>
          </el-icon>
          <el-icon v-else>
            <Menu/>
          </el-icon>
          <span class="ml5">{{ v.txt }}</span>
        </li>
      </ul>
      <div class="el-popper__arrow" :style="{ left: `${state.arrowLeft}px` }"></div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import {computed, reactive, onMounted, watch, ref} from 'vue'
import {useEventListener} from "@vueuse/core";
import {Refresh, Menu, Delete, EditPen, Download, FolderAdd, MessageBox} from '@element-plus/icons-vue';
import {FileEntryWithType} from "@/utils/client";

interface DropdownType {
  contextMenuClickId: number
  txt: string
  disabled: boolean
}

// 定义父组件传过来的值
const props = defineProps({
  dropdown: {
    type: Object,
    default: () => {
      return {
        x: 0,
        y: 0
      }
    }
  }
})


// 定义子组件向父组件传值/事件
const emit = defineEmits(['onContextMenuClick'])

// 定义变量内容
const state = reactive({
  isShow: false,
  arrowLeft: 10,
  current: -1,
  count: 0
})
const dropdownList = ref<DropdownType[]>([
  {
    contextMenuClickId: 0,
    txt: '下载(多文件慢)',
    disabled: false
  },
  {
    contextMenuClickId: 1,
    txt: '压缩下载(速度快)',
    disabled: false
  },
  // {
  //   contextMenuClickId: 2,
  //   txt: '创建目录',
  //   disabled: false
  // },
  {
    contextMenuClickId: 3,
    txt: '刷新',
    disabled: false
  },
  // {
  //   contextMenuClickId: 4,
  //   txt: '重命名',
  //   disabled: false
  // },
  {
    contextMenuClickId: 5,
    txt: '删除',
    disabled: false
  }
])
const fileItem = ref<FileEntryWithType | undefined>()

// 父级传过来的坐标 x,y 值
const dropdowns = computed(() => {
  // 117 为 `Dropdown 下拉菜单` 的宽度
  if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
    return {
      x: document.documentElement.clientWidth - 117 - 5,
      y: props.dropdown.y
    }
  } else {
    return props.dropdown
  }
})

/**
 * 是否禁用
 * @param nums
 */
const onDisabled = (nums: number[]) => {
  dropdownList.value.forEach(v => {
    v.disabled = nums.includes(v.contextMenuClickId)
  })
}

// 当前项菜单点击
const onContextMenuClick = (v: DropdownType) => {
  state.current = v.contextMenuClickId
  if (!v.disabled) emit('onContextMenuClick', v.contextMenuClickId, fileItem.value)
}
/**
 * 打开右键菜单：判断是否固定，固定则不显示关闭按钮
 * @param count // 选择中数量
 * @param item
 */
const openContextmenu = (count: number, item?: FileEntryWithType) => {
  fileItem.value = item
  state.count = count
  if (item) {
    onDisabled([])
    // if (item.attrs.isDirectory()) {
    //   onDisabled([])
    // } else {
    //   onDisabled([1])
    // }
  } else {
    onDisabled(count ? [0, 1, 4] : [0, 1, 4, 5])
  }
  closeContextmenu()
  setTimeout(() => {
    state.isShow = true
  }, 10)
}
// 关闭右键菜单
const closeContextmenu = () => {
  const item = dropdownList.value.find(f => f.contextMenuClickId === state.current)
  if (!item || (item && !item.disabled)) {
    state.isShow = false
  }
}
// 监听页面监听进行右键菜单的关闭
onMounted(() => {
  useEventListener('click', closeContextmenu)
})
// 监听下拉菜单位置
watch(
  () => props.dropdown,
  ({x}) => {
    if (x + 117 > document.documentElement.clientWidth)
      state.arrowLeft = 117 - (document.documentElement.clientWidth - x)
    else state.arrowLeft = 10
  },
  {
    deep: true
  }
)

// 暴露变量
defineExpose({
  openContextmenu
})
</script>

<style scoped>
.custom-contextmenu {
  transform-origin: center top;
  z-index: 2190;
  position: fixed;
}

.custom-contextmenu .el-dropdown-menu__item {
  font-size: 12px !important;
  white-space: nowrap;
}

.custom-contextmenu .el-dropdown-menu__item i {
  font-size: 12px !important;
}

.custom-contextmenu .disabled {
  color: var(--el-color-info);
  cursor: no-drop;
}
</style>
